<template>
    <div>
        <div style="display: flex;flex-direction: row;justify-content: center">
            <el-input v-model="inputInfo" clearable style="width: 200px;margin-right: 10px" type="text"></el-input>
            <el-button icon="el-icon-search" size="medium" style="margin-left: 10px"
                       type="success" @click="handleProcessSearch">搜索
            </el-button>
            <el-button icon="el-icon-plus" size="medium"
                       style="margin-left: 100px" type="primary"
                       @click="handleProcessAddition">新增
            </el-button>
        </div>
        <div style="display: flex;align-items: center;flex-direction: column;margin-left: -25px">
            <el-table :key="centerDialogVisible"
                      :data="processes"
                      stripe
                      style="width: 90%">
                <el-table-column label="ID" prop="id" width="50px"></el-table-column>
                <el-table-column label="流程编号" prop="number"></el-table-column>
                <el-table-column label="流程名称" prop="name"></el-table-column>
                <el-table-column label="流程类型" prop="type"></el-table-column>
                <el-table-column label="流程步骤" prop="stepsLength"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">查看
                        </el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                :page-size="2"
                :total="paginationTotal"
                background
                layout="prev, pager, next"
                style="margin-top: 5px">
            </el-pagination>
        </div>
        <el-dialog
            :title="title"
            :visible.sync="centerDialogVisible"
            width="60%">
            <el-dialog
                width="30%"
                title="新增步骤"
                :visible.sync="innerVisible"
                append-to-body>
                <el-form :model="selectedStep">
                    <el-form-item label="步骤名称:" prop="title">
                        <el-input v-model="selectedStep.title"></el-input>
                    </el-form-item>

                    <el-form-item label="步骤描述:" prop="desc">
                        <el-input v-model="selectedStep.desc"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="innerVisible = false;">取 消</el-button>
                    <el-button type="primary" @click="handleInnerDialogEnter">确 定</el-button>
                </div>
            </el-dialog>
            <el-form :model="selectedProcess" class="selectedProcessForm">
                <el-form-item label="流程编号:" prop="number">
                    <el-input v-model="selectedProcess.number" :disabled="!isStepAddition"></el-input>
                </el-form-item>

                <el-form-item label="流程名称:" prop="name">
                    <el-input v-model="selectedProcess.name" :disabled="!isStepAddition"></el-input>
                </el-form-item>

                <el-form-item label="流程类型:" prop="type">
                    <el-select v-model="selectedProcess.type" :disabled="!isStepAddition">
                        <el-option
                            v-for="item in processTypeOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item class="stepsStyle"
                              style="width: 90%;margin-top: 50px;display: flex;flex-direction: column;"
                              label="流程步骤:" prop="steps">
                    <el-steps :active="selectedProcess.stepsLength" align-center>
                        <el-step v-for="step in selectedProcess.steps"
                                 :key="step.title"
                                 :description="step.desc"
                                 :title="step.title"></el-step>
                    </el-steps>
                    <el-button v-show="isStepAddition" size="medium" type="primary"
                               @click="handleStepAddition">新增步骤</el-button>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false;">取 消</el-button>
                <el-button type="primary" @click="handleDialogEnter">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import variables from "@/assets/variables";

export default {
    name: "ProcessMaintenance",
    data() {
        return {
            processes: [],
            title: "",
            inputInfo: "",
            centerDialogVisible: false,
            innerVisible: false,
            selectedProcess: {},
            selectedProcessIndex: -1,
            selectedStep: {},
            processTypeOptions: [],
        }
    },
    methods: {
        handleProcessAddition() {
            this.title = "新增";
            this.centerDialogVisible = true;
            this.selectedProcess = {
                id: this.processes.length + 1,
                steps: [],
            };
        },
        handleProcessSearch() {
            if (this.inputInfo === "") {
                this.processes = variables.processes;
            } else {
                this.processes = variables.processes.filter(process =>
                    process.name.includes(this.inputInfo) ||
                    process.type.includes(this.inputInfo) ||
                    process.number.includes(this.inputInfo)
                );
            }
        },
        handleEdit(index, obj) {
            this.title = "查看";
            this.centerDialogVisible = true;
            this.selectedProcessIndex = index;
            this.selectedProcess = JSON.parse(JSON.stringify(obj));
        },
        handleDelete(index) {
            this.processes.splice(index, 1);
            this.$message({
                type: "success",
                message: "删除成功",
            })
        },
        handleDialogEnter() {
            if (this.title === "新增") {
                this.processes.push(this.selectedProcess);
            } else {
                this.processes[this.selectedProcessIndex] = this.selectedProcess;
            }
            this.centerDialogVisible = false;
        },
        handleStepAddition() {
            this.innerVisible = true;
        },
        handleInnerDialogEnter() {
            this.selectedProcess.steps.push(this.selectedStep);
            this.selectedStep = {};
            this.$message({
               type: "success",
               message: "添加成功",
            });
            this.selectedProcess.stepsLength = this.selectedProcess.steps.length;
            this.innerVisible = false;
        }
    },
    mounted() {
        this.processes = variables.processes;
        this.processTypeOptions = variables.eventsLeaf;
        this.processes.forEach(process => {
            process.stepsLength = process.steps.length;
        })
    },
    computed: {
        paginationTotal() {
            return this.processes.length;
        },
        isStepAddition() {
            return this.title !== "查看";
        }
    }
}
</script>

<style scoped>
.selectedProcessForm {
    height: 300px;
}

.selectedProcessForm >>> .el-form-item {
    display: inline-block;
    width: 260px;
    float: left;
    margin: 5px 15px;
}

.stepsStyle >>> label {
    text-align: left;
}
</style>